{% extends "layout.html" %}
{% load static %}
{% block css %}
<script src="{% static 'plugins/axios/1.6.7/axios.min.js' %}"></script>
{% endblock %}
{% block content %}
<div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-primary" lay-on="handleAddOrder">
        <span class="layui-badge-dot"></span> 新建订单
    </button>
</div>
<!-- 数据表格 -->
<table class="layui-table">
    <!-- 表格内容 S-->
    <table class="layui-table">
        <thead>
        <tr>
            <th>ID</th>
            <th>订单号</th>
            <th>名称</th>
            <th>价格</th>
            <th>状态</th>
            <th>管理员</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for item in data_list %}
        <tr>
            <td>{{item.id}}</td>
            <td>{{item.oid}}</td>
            <td>{{item.title}}</td>
            <td>{{item.price}}</td>
            <td>{{item.get_status_display}}</td>
            <td>{{item.user.username}}</td>
            <td>
               <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-on="handleEditOrder" data-id='{{ item.id }}'>
                    编辑
                </button>
                <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-on="handleDeleteOrder" data-id='{{ item.id }}'>
                    删除
                </button>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</table>
<!-- 分页区域 -->
<div id="LayPageComps"></div>

<!--弹出表单 S-->
<div id="orderFormDialog" style="margin: 16px;display: none">
    <div class="layui-form">
        <form id="orderForm"   class="layui-form layui-padding-3" novalidate autocomplete="off" lay-filter="dataPage">
            <div class="layui-form-item">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-block">
                    <input type="text" name="title" value=""   lay-verify="required"  lay-reqtext="请填写商品名称" placeholder="请填写商品名称"  autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品价格</label>
                <div class="layui-input-block">
                    <input type="number" name="price" value="" lay-verify="required" placeholder="请填写商品价格" lay-reqtext="请填写商品价格" autocomplete="off" class="layui-input" lay-affix="number">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">订单状态</label>
                <div class="layui-input-block">
                    <select name="status" lay-verify="required" lay-reqtext="请选择订单状态"  lay-append-to="body" lay-append-position="fixed"> <!-- 修改 name 为 status -->
                        {% for item in form.status.field.choices %}
                        <option value="{{ item.0 }}">{{ item.1 }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">买家</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <select name="user" lay-append-to="body"  lay-append-position="fixed"> &lt;!&ndash; 修改 name 为 status &ndash;&gt;-->
<!--                        {% for item in form.user.field.choices %}-->
<!--                            <option value="{{ item.0 }}">{{ item.1 }}</option>-->
<!--                        {% endfor %}-->
<!--                    </select>-->
<!--                </div>-->
<!--            </div>-->
        </form>
        <div class="layui-form-item">
            <button class="layui-btn" lay-submit lay-filter="saveOrder">提交订单</button>
            <button class="layui-btn" lay-on="handleCancel">关闭</button>
        </div>
    </div>
</div>
<!--弹出表单 E-->

{% endblock %}

{% block js %}
<script>
    layui.use(function () {
        var $ = layui.$;
        var layer = layui.layer;
        var util = layui.util;
        var layForm = layui.form;
        // 事件
        util.on('lay-on', {
            //新增
            'handleAddOrder': function () {
                
                layer.open({
                    type: 1,
                    area: '600px',
                    resize: false,
                    shadeClose: false,
                    title: '新建订单',
                    content: $('#orderFormDialog'), // 使用表单的内容
                    success: function (layero) {
                        $("#orderForm")[0].reset() // 清空表单
                        layForm.render(layero.find('.layui-form select'));
                        // 表单提交事件
                        layForm.on('submit(saveOrder)', function (data) {
                            console.log('我是新建')
                            var field = data.field; // 获取表单字段值
                            // 此处可执行 Ajax 等操作
                            let formData = new FormData(document.getElementById('orderForm')); // 使用表单的 DOM 元素
                            axios({
                                method: 'post',
                                url:'/order/add/',
                                data:formData,
                                headers: {
                                    'Content-Type': 'multipart/form-data'
                                }
                            }).then(res=>{
                                console.log(res)
                                const { status,error } = res.data;
                                if(status){
                                    // 订单已创建
                                    layer.closeLast('page');
                                    document.getElementById('orderForm').reset() // 清空表单
                                    layer.msg('订单已创建');
                                    //关闭对话框
                                    location.reload(); // 添加此行以刷新页面
                                }else{
                                    // error:{user: ["这个字段是必填项。"]}
                                    // 处理错误信息
                                    for (let key in error) {
                                        let errorMessage = error[key].length>=1 ? error[key][1] : error[key][0];
                                        let inputElement = $(`[name="${key}"]`);
                                        // 设置错误提示
                                        layForm.error(inputElement, errorMessage);
                                    }
                                }
                            }).catch(err=>{
                                console.log(err)
                            })
                            return false; // 阻止默认 form 跳转
                        });
                    }
                });
            },
            //取消
            'handleCancel': function () {
                console.log(layer)
                layer.closeLast('page');
            },
            //编辑
            'handleEditOrder':function (){
                let order_id = this.dataset.id;
                // 获取对应数据通过order_id
                axios({
                    method: 'get',
                    url:'/order/details/',
                    params:{
                        order_id
                    }
                }).then(res=>{
                    const { status,message,data } = res.data;
                    if(status){
                        //数据回显
                        layer.open({
                            type: 1,
                            area: '600px',
                            resize: false,
                            shadeClose: false,
                            title: `编辑订单-${data.oid}`,
                            content: $('#orderFormDialog'), // 使用表单的内容
                            success: function (layero) {
                                layForm.val("dataPage",data);  // 这个函数就是数据回显的核心
                                layForm.on('submit(saveOrder)', function (data) {
                                    orderEdit(order_id)
                                })
                            }
                        });
                    }else{
                        layer.msg(message);
                    }
                }).catch(err=>{

                })
            },
            //删除
            'handleDeleteOrder':function (){
                let order_id = this.dataset.id;
                layer.confirm('是否确认删除？', {
                    title: '二次确认',
                    btn: ['确定', '关闭'] //按钮
                }, function(){
                        axios({
                            method: 'get',
                            url:'/order/delete/',
                            params:{
                                order_id
                            }
                        }).then(res=>{
                                const { status,error,message } = res.data;
                                console.log(res)
                                if(status){
                                    // 订单已创建
                                    layer.closeLast('confirm');
                                    //关闭对话框
                                    location.reload(); // 添加此行以刷新页面
                                    layer.msg('订单已删除');
                                }else{
                                    layer.msg(`${message}`);
                                }
                        }).catch(err=>{
                            console.log(err)
                        })
                }, function(){

                });
            }
        })
        // 自定义错误提示方法
        layForm.error = function (element, message) {
            element.siblings('.layui-form-mid').remove();
            element.after('<div class="layui-form-mid layui-word-aux layui-font-red">' + message + '</div>');
            element.addClass('layui-input-error');
        };

         function orderEdit(order_id){
            // 此处可执行 Ajax 等操作
            let formData = new FormData(document.getElementById('orderForm')); // 使用表单的 DOM 元素
            axios({
                method: 'post',
                url:`/order/edit/?order_id=${order_id}`,
                data:formData,
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(res=>{
                console.log(res)
                const { status,code,error,message } = res.data;
                if(status && code ==='200'){
                    // 订单已创建
                    layer.closeLast('page');
                    document.getElementById('orderForm').reset() // 清空表单
                    //关闭对话框
                    location.reload(); // 添加此行以刷新页面
                    layer.msg('订单已更新');
                }else{
                    layer.msg(`${message}`);
                    // error:{user: ["这个字段是必填项。"]}
                    // 处理错误信息
                    for (let key in error) {
                        let errorMessage = error[key].length>=1 ? error[key][1] : error[key][0];
                        let inputElement = $(`[name="${key}"]`);
                        // 设置错误提示
                        layForm.error(inputElement, errorMessage);
                    }
                }
            }).catch(err=>{
                console.log(err)
            })
    }

    });

</script>
<script src="{% static 'js/pagination.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        initPagination('LayPageComps', {{totals}}, {{current_page}}, {{page_size}});
    });
</script>
{% endblock %}